<template>
  <div>
    <edu-page-tabs :tab-list="xTabs" :tab-secret="TabS" />
    <div class="content-box">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item v-for="item in datas" :key="item.id" :name="item.id" @click.native="setRead(item)">
          <template slot="title">
            <span v-if="item.is_read == 0" class="unread" />
            【{{ item.format_time }}】 {{ item.title }}
          </template>
          <div>
            <span>{{ item.content }}</span>
            <el-link v-if="item.message_type" class="haddle-btn" type="primary" :underline="false" @click="toLink(item)">点击处理</el-link>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-row type="flex" align="middle" justify="end" class="paginate">
      <el-pagination :current-page.sync="paginate.page" :page-size="paginate.count" layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" />
    </el-row>
  </div>
</template>

<script>
import EduPageTabs from '@public/template/tabs/page_tabs.vue';
export default {
  components: {
    EduPageTabs
  },
  data() {
    return {
      response: null,
      paginate: {
        count: 20,
        page: 1
      },
      xTabs: [
        {
          title: '系统消息',
          uri: '/system/message/list'
        }
      ],
      TabS: [
        {
          title: '全部已读',
          key: 'read',
          method: 'put',
          uri: '/admin/system/message/read'
        }
      ],
      activeName: 0,
      ids: []
    };
  },
  computed: {
    datas() {
      if (this.response) {
        return this.response.datas;
      }
      return [];
    },
    total() {
      if (this.response) {
        return this.response.paginate.total;
      }
      return 0;
    }
  },
  created() {
    this.loadData();
  },
  mounted() {
    this.$store.dispatch('setLoading', 0);
  },
  methods: {
    loadData: function() {
      this.$http.get(
        '/admin/system/message/list',
        {
          ...this.paginate
        },
        response => {
          this.response = response.data;
        },
        _ => {
          this.$message.error('请求出错');
        }
      );
    },
    handleCurrentChange: function(page) {
      this.paginate.page = page;
      this.loadData();
    },
    toLink: function({ message_type: messageType }) {
      let path = '';
      switch (messageType) {
        case 'teacher_section_auth':
        case 'school_section_auth':
          path = '/course/video/examine/list';
          break;
        case 'school':
          path = '/school/waiting';
          break;
        case 'teacher':
          path = '/user/teacher/waiting';
          break;
      }
      const routeData = this.$router.resolve({ path: path });
      window.open(routeData.href, '_blank');
    },
    setRead: function(item) {
      if (this.activeName && item.is_read == 0 && !this.$util.inArray(item.id, this.ids)) {
        // 设置成已读
        this.$http.put(
          '/admin/system/message/' + item.id + '/read',
          {},
          response => {
            this.ids.push(item.id);
            this.$store.dispatch('message/setNoReadCount', response.data.no_read_count);
          },
          error => {
            this.$message.error(error.msg);
          },
          false
        );
      }
    },
    setAllReadDatas() {
      this.datas.forEach(function(item, index) {
        item.is_read = 1;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content-box {
  padding: 0 20px;
  .unread {
    width: 5px;
    height: 5px;
    background-color: #f54030;
    border-radius: 50%;
  }
}
.paginate {
  margin-right: 20px;
}
.haddle-btn {
  margin-left: 6px;
}
</style>
